<template>


    <a-collapse :default-active-key="[]" @change="collapseChange">
        <a-collapse-item key="1">
            <template #expand-icon>
                <slot name="seach"></slot>
            </template>
            <template #extra>
                <div class="flex items-center justify-center w-8 h-8 ml-3 rounded-md collapse__button">
                    <img class="w-4 h-4" v-if="!showIcon" src="@/assets/images/show.svg" alt="">
                    <img class="w-4 h-4" v-else src="@/assets/images/show-open.svg" alt="">
                </div>
            </template>
            <slot name="content">

            </slot>

        </a-collapse-item>
    </a-collapse>

</template>

<script setup lang="ts">
import { ref } from 'vue';
const showIcon = ref(false);
const collapseChange = (key: string | string[]) => {
    // 判断当前是否展开
    key.includes('1') ? showIcon.value = true : showIcon.value = false;
}

</script>

<style lang="less" scoped>
.collapse__button {
    cursor: pointer;
    background: @base-color-hover-bg;
}

:deep(.arco-collapse-item-header) {
    justify-content: start;
}

:deep(.arco-collapse-item .arco-collapse-item-icon-hover) {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
}

:deep(.arco-collapse-item-content-box) {
    padding: 20px;
    background-color: @base-color-bg-1;
}
</style>